<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <!-- <script src="./lib/Promise_es5.js"></script> -->
  <!-- <script src="./lib/Promise_es6.js"></script> -->
  <!-- <script src="./lib/Promise_es6_MutationObserver.js"></script> -->
  <script src="./lib/Promise_tidy.js"></script>
  <script>
    // es6 写法
    // new Promise((resolve, reject)=>{
    //   resolve(1);
    // }).then(value=>{
    //   console.log(value);
    // }).then(value=>{
    //   console.log(value);
    // }).then(value=>{
    //   console.log(value);
    //   return new Promise((resolve, reject)=>{
    //     reject('test 2134')
    //   })
    // }).catch(error=>{
    //   console.log('test reject', error)
    // });

    // var p1 = Promise.resolve(222);
    // var p2 = Promise.reject(3333);
    // var p3 = Promise.resolve(Promise.resolve(444));
    // var p4 = new Promise((resolve, reject)=>{
    //   setTimeout(() => {
    //     resolve('demo test', '555')
    //   }, 3000);
    // });
    // console.log('p1', p1);
    // console.log('p2', p2);
    // console.log('p3', p3);
    // console.log('p4', p4);
    // // [p1, p2, 6666, p3, p4]
    // Promise.all([p1, 6666, p3, p4]).then(value=>{
    //   console.log('all resolve', value);
    // }, reason=>{
    //   console.log('all reject', reason);
    // });

    // Promise.race([p1, p2, 6666, p3, p4]).then(value=>{
    //   console.log('race resolve', value);
    // }, reason=>{
    //   console.log('race reject', reason);
    // })

    // es5 写法
    new Promise(function(resolve, reject) {
      resolve(1);
    }).then(function(value){
      console.log(value);
    }).then(function(value){
      console.log(value);
    }).then(function(value){
      console.log(value);
      return new Promise(function(resolve, reject){
        reject('test 2134')
      })
    }).catch(function(error){
      console.log('test reject', error)
    });

    var p1 = Promise.resolve(222);
    var p2 = Promise.reject(3333);
    var p3 = Promise.resolve(Promise.resolve(444));
    var p4 = new Promise(function(resolve, reject){
      setTimeout(function() {
        resolve('demo test', '555')
      }, 3000);
    });
    p1.then(v=>{console.log('p1', v)})
    console.log('log p1');
    console.log('p1', p1);
    console.log('p2', p2);
    console.log('p3', p3);
    console.log('p4', p4);
    // [p1, p2, 6666, p3, p4]
    Promise.all([p1, 6666, p3, p4]).then(function(value){
      console.log('all resolve', value);
    }, function(reason){
      console.log('all reject', reason);
    });
    Promise.all([p1, 6666, p2, p3, p4]).then(function(value){
      console.log('all resolve', value);
    }, function(reason){
      console.log('all reject', reason);
    });

    Promise.race([p1, p2, 6666, p3, p4]).then(function(value){
      console.log('race resolve', value);
    }, function(reason){
      console.log('race reject', reason);
    })
    Promise.race([p2, p1, 6666, p3, p4]).then(function(value){
      console.log('race resolve', value);
    }, function(reason){
      console.log('race reject', reason);
    })


    // 测试执行顺序
    setTimeout(function(){
      console.log(1);
    },0);
    setTimeout(function(){
      console.log(6);
    });
    new Promise(function(a,b){
      console.log(2);
      for(var i=0;i<10;i++){
        i==9&&a();
      }
      console.log(3)
    }).then(function(){
      console.log(4)
    });
    console.log(5);
    // 浏览器自带promise 和 MutationObserver 实现的 promise
    // 2 3 5 1 4 1 6
    // settimeout 异步实现 promise 很明显这个 promise 在宏队列中
    // 2 3 5 1 1 6 4
  </script>
</body>
</html>